<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head th:replace="layouts/default :: head(~{this :: title}, ~{this :: link},~{this :: _})">
    <link th:href="@{/modules/dashboard/css/dashboard.css}"  rel="stylesheet"/>
</head>
<body class="d-flex flex-column min-vh-100">
	<div class="container-fluid">
        <!-- 看板标题和筛选 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>数据看板</h2>
            <div class="d-flex">
                <select class="form-select form-select-sm me-2" id="timeRange">
                    <option value="today">今日</option>
                    <option value="week" selected>本周</option>
                    <option value="month">本月</option>
                    <option value="year">本年</option>
                </select>
                <button class="btn btn-outline-secondary btn-sm" id="refreshBtn">
                    <i class="bi bi-arrow-repeat"></i> 刷新
                </button>
            </div>
        </div>
        
        <!-- 关键指标卡片 -->
        <div class="row mb-4">
            <div class="col-md-3 mb-3">
                <div class="card border-primary">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-subtitle mb-2 text-muted">总销售额</h6>
                                <h3 class="card-title" th:text="${'¥' + #numbers.formatDecimal(dashboardData.totalSales, 1, 2)}">¥0.00</h3>
                            </div>
                            <i class="bi bi-currency-exchange fs-1 text-primary"></i>
                        </div>
                        <p class="card-text text-success mt-2">
                            <i class="bi bi-arrow-up"></i>
                            <span th:text="${dashboardData.salesGrowthRate + '%'}">0%</span> 同比增长
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3 mb-3">
                <div class="card border-success">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-subtitle mb-2 text-muted">订单总数</h6>
                                <h3 class="card-title" th:text="${dashboardData.totalOrders}">0</h3>
                            </div>
                            <i class="bi bi-cart-check fs-1 text-success"></i>
                        </div>
                        <p class="card-text text-success mt-2">
                            <i class="bi bi-arrow-up"></i>
                            <span th:text="${dashboardData.orderGrowthRate + '%'}">0%</span> 同比增长
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3 mb-3">
                <div class="card border-info">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-subtitle mb-2 text-muted">用户总数</h6>
                                <h3 class="card-title" th:text="${dashboardData.totalUsers}">0</h3>
                            </div>
                            <i class="bi bi-people fs-1 text-info"></i>
                        </div>
                        <p class="card-text text-success mt-2">
                            <i class="bi bi-arrow-up"></i>
                            <span th:text="${dashboardData.userGrowthRate + '%'}">0%</span> 同比增长
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-3 mb-3">
                <div class="card border-warning">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-subtitle mb-2 text-muted">平均客单价</h6>
                                <h3 class="card-title" th:text="${'¥' + #numbers.formatDecimal(dashboardData.avgOrderValue, 1, 2)}">¥0.00</h3>
                            </div>
                            <i class="bi bi-graph-up fs-1 text-warning"></i>
                        </div>
                        <p class="card-text text-danger mt-2">
                            <i class="bi bi-arrow-down"></i>
                            <span th:text="${dashboardData.avgOrderValueChange + '%'}">0%</span> 同比变化
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 图表行 -->
        <div class="row">
            <!-- 销售趋势图 -->
            <div class="col-lg-8 mb-4">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">销售趋势</h5>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-outline-secondary active" data-metric="amount">销售额</button>
                            <button type="button" class="btn btn-outline-secondary" data-metric="count">订单数</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="salesChart" height="300"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 热门产品 -->
            <div class="col-lg-4 mb-4">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="mb-0">热门产品</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>产品</th>
                                        <th class="text-end">销量</th>
                                        <th class="text-end">销售额</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="product : ${dashboardData.topProducts}">
                                        <td th:text="${product.name}">产品名称</td>
                                        <td class="text-end" th:text="${product.salesCount}">0</td>
                                        <td class="text-end" th:text="${'¥' + #numbers.formatDecimal(product.salesAmount, 1, 2)}">¥0.00</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 第二行图表 -->
        <div class="row">
            <!-- 用户来源 -->
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="mb-0">用户来源</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="userSourceChart" height="250"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 订单状态 -->
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="mb-0">订单状态分布</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="orderStatusChart" height="250"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
	<script th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/modules/mobile/js/mobile.js}"></script>
    <!-- 图表库 -->
    <script th:src="@{/webjars/chartjs/dist/chart.min.js}"></script>
    <!-- 看板专用JS -->
    <script th:src="@{/modules/dashboard/js/dashboard.js}" defer></script>
</body>

<footer th:replace="layouts/default::footer"></footer>
</html>